<template>
  <div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold mb-4 tech-text">Web Speech API</h1>
        <p class="text-gray-300 text-lg">
          语音合成（文本转语音）和语音识别（语音转文本）功能
        </p>
      </div>

      <!-- 浏览器支持提示 -->
      <div v-if="!isSpeechSynthesisSupported && !isSpeechRecognitionSupported" class="tech-card mb-8 border-yellow-600">
        <div class="flex items-center mb-4">
          <i class="i-carbon-warning text-yellow-500 text-xl mr-3"></i>
          <h3 class="text-xl font-semibold text-yellow-500">浏览器支持提示</h3>
        </div>
        <p class="text-gray-300">
          您的浏览器不支持 Web Speech API。建议使用最新版本的 Chrome、Edge 或 Safari。
        </p>
      </div>

      <!-- 语音合成（文本转语音） -->
      <div class="tech-card mb-8">
        <div class="flex items-center mb-6">
          <i class="i-carbon-volume-up text-3xl text-tech-accent mr-3"></i>
          <h2 class="text-2xl font-semibold text-white">语音合成（文本转语音）</h2>
        </div>

        <div v-if="!isSpeechSynthesisSupported" class="text-center py-8 text-gray-400">
          您的浏览器不支持语音合成功能
        </div>

        <div v-else class="space-y-6">
          <!-- 文本输入 -->
          <div class="bg-gray-800 rounded-lg p-6">
            <label class="block text-white font-semibold mb-3">输入要朗读的文本:</label>
            <textarea
              v-model="speechText"
              placeholder="输入文本，点击播放按钮进行朗读..."
              rows="4"
              class="w-full bg-gray-700 text-white border border-gray-600 rounded-lg px-4 py-3 focus:border-tech-accent outline-none"
            ></textarea>

            <div class="flex gap-3 mt-4">
              <button
                @click="speak"
                :disabled="isSpeaking || !speechText"
                class="tech-button flex-1 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <i class="i-carbon-play-filled mr-2"></i>
                {{ isSpeaking ? '朗读中...' : '开始朗读' }}
              </button>

              <button
                @click="pauseSpeech"
                :disabled="!isSpeaking"
                class="bg-yellow-600 hover:bg-yellow-700 text-white px-6 py-3 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <i class="i-carbon-pause-filled mr-2"></i>
                {{ isPaused ? '继续' : '暂停' }}
              </button>

              <button
                @click="stopSpeech"
                :disabled="!isSpeaking"
                class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <i class="i-carbon-stop-filled mr-2"></i>
                停止
              </button>
            </div>
          </div>

          <!-- 语音设置 -->
          <div class="bg-gray-800 rounded-lg p-6">
            <h3 class="text-white font-semibold mb-4">语音设置</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <!-- 语音选择 -->
              <div>
                <label class="block text-gray-300 mb-2">
                  语音: {{ selectedVoice?.name || '默认' }}
                </label>
                <select
                  v-model="selectedVoiceIndex"
                  class="w-full bg-gray-700 text-white border border-gray-600 rounded-lg px-3 py-2 focus:border-tech-accent outline-none"
                >
                  <option :value="-1">默认语音</option>
                  <option
                    v-for="(voice, index) in voices"
                    :key="index"
                    :value="index"
                  >
                    {{ voice.name }} ({{ voice.lang }})
                  </option>
                </select>
              </div>

              <!-- 语言筛选 -->
              <div>
                <label class="block text-gray-300 mb-2">语言筛选:</label>
                <select
                  v-model="languageFilter"
                  class="w-full bg-gray-700 text-white border border-gray-600 rounded-lg px-3 py-2 focus:border-tech-accent outline-none"
                >
                  <option value="">全部语言</option>
                  <option value="zh">中文</option>
                  <option value="en">英语</option>
                  <option value="ja">日语</option>
                  <option value="ko">韩语</option>
                  <option value="fr">法语</option>
                  <option value="de">德语</option>
                  <option value="es">西班牙语</option>
                </select>
              </div>
            </div>

            <div class="mt-6 space-y-4">
              <!-- 音调 -->
              <div>
                <label class="block text-gray-300 mb-2">
                  音调 (Pitch): {{ pitch.toFixed(1) }}
                </label>
                <input
                  v-model.number="pitch"
                  type="range"
                  min="0"
                  max="2"
                  step="0.1"
                  class="w-full"
                >
                <div class="flex justify-between text-xs text-gray-400 mt-1">
                  <span>低音</span>
                  <span>正常</span>
                  <span>高音</span>
                </div>
              </div>

              <!-- 语速 -->
              <div>
                <label class="block text-gray-300 mb-2">
                  语速 (Rate): {{ rate.toFixed(1) }}x
                </label>
                <input
                  v-model.number="rate"
                  type="range"
                  min="0.1"
                  max="3"
                  step="0.1"
                  class="w-full"
                >
                <div class="flex justify-between text-xs text-gray-400 mt-1">
                  <span>慢速</span>
                  <span>正常</span>
                  <span>快速</span>
                </div>
              </div>

              <!-- 音量 -->
              <div>
                <label class="block text-gray-300 mb-2">
                  音量 (Volume): {{ Math.round(volume * 100) }}%
                </label>
                <input
                  v-model.number="volume"
                  type="range"
                  min="0"
                  max="1"
                  step="0.1"
                  class="w-full"
                >
              </div>
            </div>
          </div>

          <!-- 快速测试 -->
          <div class="bg-gray-800 rounded-lg p-6">
            <h3 class="text-white font-semibold mb-4">快速测试</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
              <button
                @click="speakQuick('你好，世界！')"
                class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg transition-colors"
              >
                中文测试
              </button>
              <button
                @click="speakQuick('Hello, World!')"
                class="bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg transition-colors"
              >
                英文测试
              </button>
              <button
                @click="speakQuick('こんにちは、世界！')"
                class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-lg transition-colors"
              >
                日文测试
              </button>
              <button
                @click="speakQuick('안녕하세요, 세계!')"
                class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-3 rounded-lg transition-colors"
              >
                韩文测试
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 语音识别（语音转文本） -->
      <div class="tech-card mb-8">
        <div class="flex items-center mb-6">
          <i class="i-carbon-microphone text-3xl text-tech-accent mr-3"></i>
          <h2 class="text-2xl font-semibold text-white">语音识别（语音转文本）</h2>
        </div>

        <div v-if="!isSpeechRecognitionSupported" class="text-center py-8 text-gray-400">
          您的浏览器不支持语音识别功能
        </div>

        <div v-else class="space-y-6">
          <!-- 识别控制 -->
          <div class="bg-gray-800 rounded-lg p-6">
            <div class="flex items-center justify-center mb-6">
              <div
                :class="[
                  isListening ? 'bg-red-600 animate-pulse' : 'bg-gray-700',
                  'w-32 h-32 rounded-full flex items-center justify-center transition-colors'
                ]"
              >
                <i class="i-carbon-microphone text-6xl text-white"></i>
              </div>
            </div>

            <div class="text-center mb-6">
              <p class="text-gray-300 mb-2">
                {{ isListening ? '正在监听...' : '点击下方按钮开始语音识别' }}
              </p>
              <p v-if="isListening" class="text-sm text-gray-400">
                请对着麦克风说话
              </p>
            </div>

            <div class="flex gap-3">
              <button
                @click="startRecognition"
                :disabled="isListening"
                class="tech-button flex-1 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <i class="i-carbon-microphone mr-2"></i>
                开始识别
              </button>

              <button
                @click="stopRecognition"
                :disabled="!isListening"
                class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors flex-1 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <i class="i-carbon-stop-filled mr-2"></i>
                停止识别
              </button>
            </div>
          </div>

          <!-- 识别设置 -->
          <div class="bg-gray-800 rounded-lg p-6">
            <h3 class="text-white font-semibold mb-4">识别设置</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-gray-300 mb-2">识别语言:</label>
                <select
                  v-model="recognitionLang"
                  class="w-full bg-gray-700 text-white border border-gray-600 rounded-lg px-3 py-2 focus:border-tech-accent outline-none"
                >
                  <option value="zh-CN">中文（简体）</option>
                  <option value="zh-TW">中文（繁体）</option>
                  <option value="en-US">英语（美国）</option>
                  <option value="en-GB">英语（英国）</option>
                  <option value="ja-JP">日语</option>
                  <option value="ko-KR">韩语</option>
                  <option value="fr-FR">法语</option>
                  <option value="de-DE">德语</option>
                  <option value="es-ES">西班牙语</option>
                </select>
              </div>

              <div class="flex items-center">
                <label class="flex items-center text-gray-300 cursor-pointer">
                  <input
                    v-model="continuousRecognition"
                    type="checkbox"
                    class="mr-2 w-4 h-4"
                  >
                  连续识别（不自动停止）
                </label>
              </div>
            </div>
          </div>

          <!-- 识别结果 -->
          <div class="bg-gray-800 rounded-lg p-6">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-white font-semibold">识别结果</h3>
              <button
                @click="clearTranscript"
                class="text-red-400 hover:text-red-300 text-sm"
              >
                <i class="i-carbon-clean mr-1"></i>
                清空
              </button>
            </div>

            <div class="min-h-[100px] bg-gray-900 rounded-lg p-4">
              <p v-if="!transcript && !interimTranscript" class="text-gray-400 text-center py-4">
                识别结果将显示在这里...
              </p>
              <p v-else class="text-white leading-relaxed">
                {{ transcript }}
                <span class="text-gray-400">{{ interimTranscript }}</span>
              </p>
            </div>

            <div v-if="transcript" class="mt-4 flex gap-3">
              <button
                @click="copyTranscript"
                class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors text-sm"
              >
                <i class="i-carbon-copy mr-1"></i>
                复制文本
              </button>

              <button
                @click="speakTranscript"
                class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors text-sm"
              >
                <i class="i-carbon-volume-up mr-1"></i>
                朗读结果
              </button>
            </div>
          </div>

          <!-- 识别历史 -->
          <div v-if="recognitionHistory.length > 0" class="bg-gray-800 rounded-lg p-6">
            <h3 class="text-white font-semibold mb-4">识别历史</h3>

            <div class="space-y-2 max-h-64 overflow-y-auto">
              <div
                v-for="(item, index) in recognitionHistory.slice().reverse()"
                :key="index"
                class="bg-gray-900 rounded-lg p-3"
              >
                <div class="flex justify-between items-start">
                  <p class="text-gray-300 flex-1">{{ item.text }}</p>
                  <span class="text-gray-400 text-xs ml-3">{{ formatTime(item.timestamp) }}</span>
                </div>
              </div>
            </div>

            <button
              @click="clearHistory"
              class="mt-4 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors text-sm"
            >
              <i class="i-carbon-trash-can mr-1"></i>
              清空历史
            </button>
          </div>
        </div>
      </div>

      <!-- 语音命令示例 -->
      <div v-if="isSpeechRecognitionSupported" class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">语音命令示例</h2>

        <div class="bg-gray-800 rounded-lg p-6">
          <p class="text-gray-300 mb-4">
            尝试说出以下命令（需要先开启语音识别）：
          </p>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div
              v-for="command in voiceCommands"
              :key="command.text"
              :class="[
                command.active ? 'border-green-500 bg-green-900/20' : 'border-gray-700',
                'border-2 rounded-lg p-4 transition-all'
              ]"
            >
              <div class="flex items-center mb-2">
                <i :class="command.icon" class="text-xl text-tech-accent mr-2"></i>
                <span class="text-white font-semibold">{{ command.text }}</span>
              </div>
              <p class="text-gray-400 text-sm">{{ command.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- API 信息 -->
      <div class="tech-card">
        <h3 class="text-xl font-semibold mb-4 text-white">API 信息</h3>
        <div class="space-y-4 text-gray-300">
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">浏览器支持</h4>
            <p><strong>语音合成：</strong>Chrome 33+, Firefox 49+, Safari 7+, Edge 14+</p>
            <p><strong>语音识别：</strong>Chrome 25+, Edge 79+（需要前缀）</p>
            <p class="text-sm text-yellow-400 mt-1">注意：Firefox 和 Safari 对语音识别的支持有限</p>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">语音合成 API</h4>
            <ul class="list-disc list-inside space-y-1">
              <li><code class="bg-gray-800 px-2 py-1 rounded">window.speechSynthesis</code> - 语音合成对象</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">SpeechSynthesisUtterance</code> - 语音话语对象</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">speechSynthesis.speak()</code> - 开始朗读</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">speechSynthesis.pause()</code> - 暂停朗读</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">speechSynthesis.cancel()</code> - 取消朗读</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">speechSynthesis.getVoices()</code> - 获取可用语音</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">语音识别 API</h4>
            <ul class="list-disc list-inside space-y-1">
              <li><code class="bg-gray-800 px-2 py-1 rounded">SpeechRecognition</code> - 语音识别对象</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">recognition.start()</code> - 开始识别</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">recognition.stop()</code> - 停止识别</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">recognition.lang</code> - 设置识别语言</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">recognition.continuous</code> - 是否连续识别</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">recognition.interimResults</code> - 是否返回临时结果</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">基本用法</h4>
            <pre class="bg-gray-800 p-4 rounded text-sm overflow-x-auto">
<span class="text-gray-500">// 语音合成</span>
<span class="text-blue-400">const</span> utterance = <span class="text-blue-400">new</span> SpeechSynthesisUtterance(<span class="text-green-400">'Hello World'</span>);
utterance.rate = <span class="text-orange-400">1.0</span>;
utterance.pitch = <span class="text-orange-400">1.0</span>;
utterance.volume = <span class="text-orange-400">1.0</span>;
speechSynthesis.speak(utterance);

<span class="text-gray-500">// 语音识别</span>
<span class="text-blue-400">const</span> recognition = <span class="text-blue-400">new</span> webkitSpeechRecognition();
recognition.lang = <span class="text-green-400">'zh-CN'</span>;
recognition.continuous = <span class="text-blue-400">true</span>;
recognition.onresult = (event) => {
  <span class="text-blue-400">const</span> transcript = event.results[<span class="text-orange-400">0</span>][<span class="text-orange-400">0</span>].transcript;
  console.log(transcript);
};
recognition.start();</pre>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">使用场景</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li>语音助手和智能对话系统</li>
              <li>无障碍辅助工具（屏幕阅读器）</li>
              <li>语音控制应用和游戏</li>
              <li>语言学习和发音练习</li>
              <li>语音笔记和听写工具</li>
              <li>车载系统和智能家居控制</li>
              <li>客服机器人和语音导航</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">最佳实践</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li>提供用户明确的语音控制指示</li>
              <li>处理语音识别的错误和超时情况</li>
              <li>为语音命令提供视觉反馈</li>
              <li>支持多种语言和方言</li>
              <li>考虑环境噪音对识别的影响</li>
              <li>提供文本输入作为替代方案</li>
              <li>尊重用户隐私，说明麦克风使用</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">权限要求</h4>
            <div class="text-sm space-y-1">
              <p>语音识别需要麦克风权限，浏览器会提示用户授权。</p>
              <p>HTTPS 环境下才能使用语音识别功能。</p>
              <p>某些浏览器可能需要用户手动触发才能开始识别。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 类型定义
interface VoiceCommand {
  text: string
  description: string
  icon: string
  active: boolean
}

interface RecognitionHistoryItem {
  text: string
  timestamp: number
}

// 语音合成状态
const isSpeechSynthesisSupported = ref(false)
const speechText = ref('欢迎使用 Web Speech API 演示！这是一个功能强大的语音合成和语音识别工具。')
const isSpeaking = ref(false)
const isPaused = ref(false)
const voices = ref<SpeechSynthesisVoice[]>([])
const selectedVoiceIndex = ref(-1)
const languageFilter = ref('')
const pitch = ref(1)
const rate = ref(1)
const volume = ref(1)

// 语音识别状态
const isSpeechRecognitionSupported = ref(false)
const isListening = ref(false)
const transcript = ref('')
const interimTranscript = ref('')
const recognitionLang = ref('zh-CN')
const continuousRecognition = ref(false)
const recognitionHistory = ref<RecognitionHistoryItem[]>([])

let recognition: any = null
let currentUtterance: SpeechSynthesisUtterance | null = null

// 语音命令
const voiceCommands = ref<VoiceCommand[]>([
  { text: '你好', description: '问候命令', icon: 'i-carbon-user', active: false },
  { text: '打开菜单', description: '打开应用菜单', icon: 'i-carbon-menu', active: false },
  { text: '关闭', description: '关闭当前窗口', icon: 'i-carbon-close', active: false },
  { text: '帮助', description: '显示帮助信息', icon: 'i-carbon-help', active: false }
])

// 计算属性
const selectedVoice = computed(() => {
  if (selectedVoiceIndex.value === -1) return null
  return voices.value[selectedVoiceIndex.value]
})

const filteredVoices = computed(() => {
  if (!languageFilter.value) return voices.value
  return voices.value.filter(voice => voice.lang.startsWith(languageFilter.value))
})

// 初始化
onMounted(() => {
  // 检查语音合成支持
  isSpeechSynthesisSupported.value = 'speechSynthesis' in window

  if (isSpeechSynthesisSupported.value) {
    loadVoices()
    
    // 某些浏览器需要在 voiceschanged 事件中加载语音
    if (speechSynthesis.onvoiceschanged !== undefined) {
      speechSynthesis.onvoiceschanged = loadVoices
    }
  }

  // 检查语音识别支持
  const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
  isSpeechRecognitionSupported.value = !!SpeechRecognition

  if (isSpeechRecognitionSupported.value) {
    setupRecognition()
  }
})

// 加载可用语音
const loadVoices = () => {
  voices.value = speechSynthesis.getVoices()
}

// 朗读文本
const speak = () => {
  if (!speechText.value) return

  // 停止当前朗读
  speechSynthesis.cancel()

  currentUtterance = new SpeechSynthesisUtterance(speechText.value)
  currentUtterance.pitch = pitch.value
  currentUtterance.rate = rate.value
  currentUtterance.volume = volume.value

  if (selectedVoice.value) {
    currentUtterance.voice = selectedVoice.value
  }

  currentUtterance.onstart = () => {
    isSpeaking.value = true
    isPaused.value = false
  }

  currentUtterance.onend = () => {
    isSpeaking.value = false
    isPaused.value = false
  }

  currentUtterance.onerror = (event) => {
    console.error('语音合成错误:', event)
    isSpeaking.value = false
    isPaused.value = false
  }

  speechSynthesis.speak(currentUtterance)
}

// 暂停/继续朗读
const pauseSpeech = () => {
  if (isPaused.value) {
    speechSynthesis.resume()
    isPaused.value = false
  } else {
    speechSynthesis.pause()
    isPaused.value = true
  }
}

// 停止朗读
const stopSpeech = () => {
  speechSynthesis.cancel()
  isSpeaking.value = false
  isPaused.value = false
}

// 快速朗读
const speakQuick = (text: string) => {
  speechText.value = text
  speak()
}

// 设置语音识别
const setupRecognition = () => {
  const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
  recognition = new SpeechRecognition()

  recognition.lang = recognitionLang.value
  recognition.continuous = continuousRecognition.value
  recognition.interimResults = true
  recognition.maxAlternatives = 1

  recognition.onstart = () => {
    isListening.value = true
  }

  recognition.onresult = (event: any) => {
    let interimText = ''
    let finalText = ''

    for (let i = event.resultIndex; i < event.results.length; i++) {
      const result = event.results[i]
      if (result.isFinal) {
        finalText += result[0].transcript
      } else {
        interimText += result[0].transcript
      }
    }

    if (finalText) {
      transcript.value += finalText
      
      // 添加到历史
      recognitionHistory.value.push({
        text: finalText,
        timestamp: Date.now()
      })

      // 检查语音命令
      checkVoiceCommands(finalText)
    }

    interimTranscript.value = interimText
  }

  recognition.onerror = (event: any) => {
    console.error('语音识别错误:', event.error)
    isListening.value = false
  }

  recognition.onend = () => {
    isListening.value = false
    interimTranscript.value = ''
  }
}

// 开始识别
const startRecognition = () => {
  if (!recognition) return

  recognition.lang = recognitionLang.value
  recognition.continuous = continuousRecognition.value

  try {
    recognition.start()
  } catch (error) {
    console.error('启动语音识别失败:', error)
  }
}

// 停止识别
const stopRecognition = () => {
  if (recognition) {
    recognition.stop()
  }
}

// 清空识别结果
const clearTranscript = () => {
  transcript.value = ''
  interimTranscript.value = ''
}

// 复制识别结果
const copyTranscript = async () => {
  try {
    await navigator.clipboard.writeText(transcript.value)
    alert('已复制到剪贴板！')
  } catch (error) {
    console.error('复制失败:', error)
  }
}

// 朗读识别结果
const speakTranscript = () => {
  speechText.value = transcript.value
  speak()
}

// 清空历史
const clearHistory = () => {
  recognitionHistory.value = []
}

// 检查语音命令
const checkVoiceCommands = (text: string) => {
  voiceCommands.value.forEach(command => {
    if (text.includes(command.text)) {
      command.active = true
      
      // 执行命令逻辑
      console.log('检测到语音命令:', command.text)
      
      // 2秒后重置状态
      setTimeout(() => {
        command.active = false
      }, 2000)
    }
  })
}

// 格式化时间
const formatTime = (timestamp: number): string => {
  return new Date(timestamp).toLocaleTimeString('zh-CN')
}
</script>

<style scoped>
/* 自定义样式 */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
  background: #374151;
  height: 0.5rem;
  border-radius: 0.25rem;
}

input[type="range"]::-moz-range-track {
  background: #374151;
  height: 0.5rem;
  border-radius: 0.25rem;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  margin-top: -0.375rem;
}

input[type="range"]::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: none;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>

